<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
<!--  <link rel="stylesheet" href="stylesheets/reset.css">-->
  <link rel="stylesheet" href="stylesheets/index.css">
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>{{ msg.split('').reverse().join('') }}</h1>
  <hr>

  <!--
  <div v-if="awesome">
    <h1>Vue is awesome!</h1>
    <p>渐进式 JavaScript 框架</p>
  </div>-->
  <template v-if="awesome">
    <h1>Vue is awesome!</h1>
    <p>渐进式 JavaScript 框架</p>
  </template>
  <h1 v-else>Oh no 😢</h1>
  <!--
   v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
   -->

  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  <!--
  v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
  -->
  <button @click="awesome = !awesome">change</button>

  <hr>

  <!--
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input
      placeholder="Enter your username"
      key="username-input"
    >
  </template>
  <template v-else>
    <label>Email</label>
    <input
      placeholder="Enter your email address"
      key="email-input"
    >
  </template>
  -->
  <div v-show="loginType === 'username'">
    <label>Username</label>
    <input
      placeholder="Enter your username"
      key="username-input"
    >
  </div>
  <div v-show="loginType === 'email'">
    <label>Email</label>
    <input
      placeholder="Enter your email address"
      key="email-input"
    >
  </div>
  <!--
  v-show 只是简单地切换元素的 CSS property display
  -->
  <br>
  <button @click="toggleLogin">切换登录</button>

  <!--
  v-if vs v-show
  -->
</div>

<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</body>
</html>
